<template>
  <el-container>
    <el-header>
      <ZHeader></ZHeader>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          router
          :default-active="$route.matched[0].path+'/home'"
          class="el-menu-vertical-demo"
        >

          <div v-for="(item,index) in  getNavData" :key="index">
            <!--一级菜单-->
            <el-submenu v-if=" 'child' in item" :index="$route.matched[0].path+'/'+item.path ">
              <template slot="title">
                <i :class="item.meta.icon"></i>
                <span>{{item.meta.title}}</span>
              </template>

              <el-menu-item v-for="(child,ind) in item.child" :key="ind"
                            :index="$route.matched[0].path+'/'+child.path"
              >
                <i :class="child.meta.icon"></i>
                <span slot="title">{{child.meta.title}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item
              v-else
              :key="index"
              :index="$route.matched[0].path+'/'+item.path"
            >
              <i :class="item.meta.icon"></i>
              <span slot="title">{{item.meta.title}}</span>

            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <router-view></router-view>
    </el-container>
  </el-container>

</template>

<script>
  import ZHeader from '../components/ZHeader';
  import {getNavData} from '../router/mainChildRouters'

  export default {
    components: {
      ZHeader
    },
    computed: {
      getNavData() {
        return getNavData();
      }
    },
    // created() {
    //   console.log(this.$route.matched[0].path + "/home")
    // },
    name: "main"
  }
</script>

<style scoped>

</style>
